<#assign base=request.getContextPath()/>
<link rel="stylesheet" type="text/css" href="${base}/lib/bootstrap/css/bootstrap.min.css"/>
<link href="${base}/lib/bootstrap-table/css/bootstrap-table.css" rel="stylesheet" />


<table id="myTable"></table>

<script type="text/javascript" src="${base}/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${base}/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="${base}/lib/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${base}/lib/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
    //1.创建一个div
    //2.初始化table
    $("#myTable").bootstrapTable({
        url:"/cssController/getData",
        method:"get",
        height:500,
        sidePagination:"server",
        // data:getData(),
        queryParams:queryParamsMethod,
        pagination:true,
        pageNumber:1,
        pageSize:10,
        pageList:[10, 25, 50, 100],
        showRefresh:true,
        showPaginationSwitch:true,
        uniqueId:"id",
        columns: [
            {
                checkbox:true
            },
            {
                title: "学习第一列",
                field:"name"
            },{
                title:"学习第二列",
                field:"name2"
            }
        ]
    })

    function queryParamsMethod(params) {
        params.abc="abc";
        return params;
    }
    function getData(){
        var datas=[];
        for(var i=1;i<=50;i++){
            var obj={};
            obj.name="第一个名字"+i;
            obj.name2="第二个名字"+i
            datas.push(obj);
        }
        return datas;
    }
</script>